<template>
  <div v-loading="loading" class="wrapper">
    <!-- <div class="header">
      <el-button type="primary" @click="handleDialog">批量删除</el-button>
    </div> -->
    <el-table ref="multipleTable" :data="tableData" border tooltip-effect="dark" style="width: 100%" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" />
      <!-- <el-table-column prop="id" label="id" width="50" /> -->
      <el-table-column prop="order_no" label="订单编号" width="150" />
      <el-table-column prop="package_name" label="产品" width="300" />
      <el-table-column prop="package_list_pic" label="产品图片">
        <template slot-scope="scope">
          <img :src="scope.row.package_list_pic" :preview="scope.$index" preview-text="" class="image">
        </template>
      </el-table-column>
      <el-table-column prop="content" label="评价内容" width="220" show-overflow-tooltip />
      <el-table-column prop="score" label="评分">
        <template slot-scope="scope">
          <el-rate v-model="scope.row.score" score-template="{value}" disabled show-score text-color="#ff9900" />
        </template>
      </el-table-column>
      <el-table-column prop="create_at" label="添加时间" min-width="120" />
      <el-table-column label="操作" width="300">
        <template slot-scope="scope">
          <el-button type="primary" @click="handleDetail(scope)">详情</el-button>
          <!-- <el-button type="primary" @click="handleDelete(scope)">删除</el-button> -->
        </template>
      </el-table-column>
    </el-table>
    <pagination v-show="total>listQuery.limit" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="getList" />
    <el-dialog
      :visible.sync="centerDialogVisible"
      title="是否删除"
      width="30%"
      center
    >
      <el-row>
        <el-radio v-model="radio" label="0">是</el-radio>
        <el-radio v-model="radio" label="1">否</el-radio>
      </el-row>
      <span slot="footer" class="dialog-footer">
        <el-button @click="centerDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleAttestation">确 定</el-button>
      </span>
    </el-dialog>
    <router-view />
  </div>
</template>
<script>
import Pagination from '@/components/Pagination'
import { comment, deleteComment, deleteAll } from '@/api/evaluate'
export default {
  name: '',
  components: {
    Pagination
  },
  data() {
    return {
      radio: '0',
      list: [],
      total: 0,
      listQuery: {
        page: 1,
        limit: 10
      },
      centerDialogVisible: false,
      deleteArr: [],
      loading: false
    }
  },
  computed: {
    tableData() {
      return this.list
    }
  },
  created() {
    this.getEvaluateList()
  },
  methods: {
    handleSelectionChange(val) {
      this.deleteArr = val
    },
    handleDialog() {
      if (!this.deleteArr.length) {
        this.$message.warning({
          message: '请选择删除项',
          duration: 1000
        })
        this.centerDialogVisible = false
        return
      }
      this.centerDialogVisible = true
    },
    getList(prop) {
      this.listQuery.page = prop.page
      this.listQuery.limit = prop.limit
      this.getEvaluateList()
    },
    async getEvaluateList() {
      this.loading = true
      const { page, limit } = this.listQuery
      const res = await comment({ page, size: limit })
      this.loading = false
      const { lists, count } = res.data
      this.list = lists
      this.total = count
    },
    handleDetail(scope) {
      this.$router.push({
        path: '/order/evaluate/evaluateDetail',
        query: {
          ...scope.row
          // comment_id: scope.row.id
        }
      })
    },
    // 删除单个
    async handleDelete(scope) {
      const { id } = scope.row
      const index = scope.$index
      await deleteComment({ comment_id: id })
      this.$message.success({
        message: '删除成功',
        duration: 1000
      })
      this.tableData.splice(index, 1)
    },
    // 批量删除
    handleAttestation() {
      const result = []
      if (this.radio === '0') {
        this.deleteArr.map((item) => {
          result.push(item.id)
        })
        const ids = result.join(',')
        this.deleteAllList({ ids })
      } else {
        this.centerDialogVisible = false
      }
    },
    async deleteAllList(ids) {
      await deleteAll(ids)
      this.$message.success({
        message: '删除成功',
        duration: 1000
      })
      this.getEvaluateList()
      this.centerDialogVisible = false
    }
  }
}
</script>

<style lang="scss" scoped>
.wrapper {
  width: 100%;
  padding: 20px;
  box-sizing: border-box;
  .header {
    width: 100%;
    display: flex;
    margin-bottom: 20px;
    justify-content: flex-end;
  }
  .image{
    width: 50px;
    height: 50px;
    cursor: pointer;
  }
}
</style>
